<template>
	<view>
		<view class="v0">
			<view>
				<image class="i1" src="https://7463-tcb-b6wplxbj0f4d1f-2dbfpe3a7af2a-1306834277.tcb.qcloud.la/img/u19.png"></image>
				<view class="v1">爱心：{{zj[0]}}</view>
			</view>
			<view>
				<image class="i2" src="https://7463-tcb-b6wplxbj0f4d1f-2dbfpe3a7af2a-1306834277.tcb.qcloud.la/img/u20.png"></image>
				<view class="v2">五角星：{{zj[1]}}</view>
			</view>
		</view>
		<view  class="v3">

			<image v-for="(item,index) in wz" :key="index" v-if="index<8" class="i3" @click="aixin(item,index)" @longpress="laixin(item,index)" :src="elm[item]"></image>
			<image v-for="(item,index) in wz" :key="index" v-if="index>7&&index<16" class="i3" @click="aixin(item,index)" @longpress="laixin(item,index)" :src="mt[item]"></image>

		

			
			<!-- <image class="i3" :src="mt[1]"></image>
			<image class="i3" :src="mt[1]"></image>		
			<image class="i3" :src="mt[1]"></image>
			<image class="i3" :src="mt[1]"></image>	
			<image class="i3" :src="mt[0]"></image>
			<image class="i3" :src="mt[0]"></image>		
			<image class="i3" :src="mt[0]"></image>
			<image class="i3" :src="mt[0]"></image>	
			<image class="i3" :src="elm[0]"></image>
			<image class="i3" :src="elm[0]"></image>		
			<image class="i3" :src="elm[0]"></image>
			<image class="i3" :src="elm[0]"></image>
			<image class="i3" :src="elm[1]"></image>
			<image class="i3" :src="elm[1]"></image>		
			<image class="i3" :src="elm[1]"></image>
			<image class="i3" :src="elm[1]"></image>	 -->
		</view>
		<view style="display: flex; flex-direction: row; font-size: 60rpx;">
			<view class="v4" @click="ck">重开</view>
			<view class="v5" @click="sx">重置</view>
		</view>
		<image class="i4" :src="al"></image>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				zj:[0,0],
				al:"https://7463-tcb-b6wplxbj0f4d1f-2dbfpe3a7af2a-1306834277.tcb.qcloud.la/img/u6.png",
				mt:[
					"https://7463-tcb-b6wplxbj0f4d1f-2dbfpe3a7af2a-1306834277.tcb.qcloud.la/img/u7.svg",

					"https://7463-tcb-b6wplxbj0f4d1f-2dbfpe3a7af2a-1306834277.tcb.qcloud.la/img/u8.svg",
					"https://7463-tcb-b6wplxbj0f4d1f-2dbfpe3a7af2a-1306834277.tcb.qcloud.la/img/xin.png"

					

				],
				wz:[1,1,1,1,
				0,0,0,0,
				0,0,0,0,
				1,1,1,1],
				elm:[
					"https://7463-tcb-b6wplxbj0f4d1f-2dbfpe3a7af2a-1306834277.tcb.qcloud.la/img/u6.svg",

					"https://7463-tcb-b6wplxbj0f4d1f-2dbfpe3a7af2a-1306834277.tcb.qcloud.la/img/u5.svg",
					"https://7463-tcb-b6wplxbj0f4d1f-2dbfpe3a7af2a-1306834277.tcb.qcloud.la/img/xing.png"
					

					

				]
			}
		},
		onLoad() {

		},
		methods: {
			ck(){
				this.wz=[1,1,1,1,
				0,0,0,0,
				0,0,0,0,
				1,1,1,1]
			},
			sx(){
				let that = this
				uni.showModal({
					content:"重置数据？",
					success() {
						that.zj=[0,0]
					}
				
				})
			},
			aixin(item,index){
				console.log(item)
				// 直接更新数组某个元素的属性，视图上不会同步更新，要使用这种方式。
				/**
				 * @param arr 所要更新的数组
				 * @param index 所要更新的数组的哪一项
				 * @param value 更新后的值
				 */
				var i=0
				var a=0
				var xing=0
				var xin=0
				if(item==0)
				{
					a=1
					
				}
				if(item==1)
				{
					a=0
				}
				this.$set(this.wz, index, a);
				for(i=0;i<8;i++)
				{
					xin+=this.wz[i]
				}
				for(i=8;i<16;i++)
				{
					xing+=this.wz[i]
				}
				console.log(xin,xing)
				if(xin==1)
				{
					uni.showModal({
						content:"饿了么获胜"
					})
					var b=this.zj[1]+1
					this.$set(this.zj, 1, b);
					this.wz=[1,1,1,1,
				0,0,0,0,
				0,0,0,0,
				1,1,1,1]
				}
				if(xing==1)
				{
					uni.showModal({
						content:"美团获胜"
					})
					var c=this.zj[0]+1
					this.$set(this.zj, 0, c);
					this.wz=[1,1,1,1,
					0,0,0,0,
					0,0,0,0,
					1,1,1,1]
				}
			},

			laixin(item,index){
				console.log(item)
				// 直接更新数组某个元素的属性，视图上不会同步更新，要使用这种方式。
				/**
				 * @param arr 所要更新的数组
				 * @param index 所要更新的数组的哪一项
				 * @param value 更新后的值
				 */
				var i=0
				var a=0
				var xing=0
				var xin=0
				if(item==0)
				{
					a=2
				}
				if(item==2)
				{
					a=0
				}
				this.$set(this.wz, index, a);
				for(i=0;i<8;i++)
				{
					if(this.wz[i]!=0)
					xin+=1;
				}
				for(i=8;i<16;i++)
				{
					if(this.wz[i]!=0)
					xing+=1;
				}
				console.log(xin,xing)
				if(xin==1)
				{
					uni.showModal({
						content:"饿了么获胜"
					})
					var b=this.zj[1]+1
					this.$set(this.zj, 1, b);
					this.wz=[1,1,1,1,
				0,0,0,0,
				0,0,0,0,
				1,1,1,1]
				}
				if(xing==1)
				{
					uni.showModal({
						content:"美团获胜"
					})
					var c=this.zj[0]+1
					this.$set(this.zj, 0, c);
					this.wz=[1,1,1,1,
					0,0,0,0,
					0,0,0,0,
					1,1,1,1]
				}
			},

			
		}
	}
</script>

<style>
	page{
		background-color:#f7f7f7;
	}
	.v0{
		display: flex;
		flex-direction: row;
	}
	.i1{
		width: 170rpx;
		height: 170rpx;
		padding: 70rpx 0rpx 0rpx 150rpx;
	}
	.i2{
		width: 140rpx;
		height: 140rpx;
		padding: 83rpx 0rpx 0rpx 130rpx;
	}
	.v1{
		padding: 0rpx 0rpx 0rpx 166rpx;
	}
	.v2{
		padding: 19rpx 0rpx 0rpx 113rpx;
	}
	.v3{
		text-align: center;
		width: 700rpx;
		background-color: #ccff33;
		height: 715rpx;
		margin-top: 30rpx;
		margin-left: 25rpx;
		border-radius: 25rpx;
	}
	.v4{
		background-color: #90b6b7;
		border-radius: 40rpx;
		margin-left: 140rpx;
		margin-top: 100rpx;
		width: 200rpx;
		height: 85rpx;
		text-align: center;
		color: #FFFFFF;
	}
	.v5{
		background-color: #90b6b7;
		border-radius: 40rpx;
		margin-left: 80rpx;
		margin-top: 100rpx;
		width: 200rpx;
		height: 85rpx;
		text-align: center;
		color: #FFFFFF;
	}
	.i3{
		width: 173rpx;
		height: 173rpx;
	}
	.i4{
		padding-top: 80rpx;
		margin-left: 50rpx;
		width: 650rpx;
		height: 120rpx;
	}
</style>
